<template>
  <div class="App">
        <MyHeader @addToda="addToda" /> <!-- 给子组件传addToda（）函数 -->
        <MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo" />
        <MyFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo" />
  </div>
</template>

<script>
    import MyFooter  from './components/MyFooter.vue'
    import MyHeader  from './components/MyHeader.vue'
    import MyList  from './components/MyList.vue'

    export default {
        name:'App',
        components:{
            MyFooter,
            MyHeader,
            MyList
        },
        data() {
            return {
                // todos:[
                //     {id:'001',title:'抽烟',done:true},
                //     {id:'002',title:'喝酒',done:false},
                //     {id:'003',title:'开车',done:true},
                // ]
                todos:JSON.parse(localStorage.getItem('todos')) ||[]
            }
        },
        methods:{
            // 添加一个todo
            addToda(todoObj){
                console.log('我是App组件，我收到的数据是：',todoObj);
                this.todos.unshift(todoObj)
            },
            // 勾选或取消一个勾选todo
            checkTodo(id){
                this.todos.forEach((todo)=>{
                    if (todo.id === id) {
                        todo.done = !todo.done
                    }
                })
            },
            //删除一个todo
            deleteTodo(id){
                this.todos=this.todos.filter((todo)=>{
                    return todo.id !== id
                })
            },
            // 全选、取消全选
            checkAllTodo(done){
                this.todos.forEach((todo)=>{
                    todo.done=done
                })
            },
            // 清除所有已经完成todo
            clearAllTodo(){
                this.todos=this.todos.filter((todo)=>{
                    return !todo.done
                })
            }

        },
        watch:{
            todos:{
                deep:true,
                handler(value){
                    localStorage.setItem('todos',JSON.stringify(value))
                }
                
            }
        }
    }
</script>
